function fnW(str) {
    var num;
    str >= 10 ? num = str : num = "0" + str;
    return num;
}
//获取当前时间
var timer = setInterval(function () {
    var date = new Date();
    var year = date.getFullYear(); //当前年份
    var month = date.getMonth(); //当前月份
    var data = date.getDate(); //天
    var hours = date.getHours(); //小时
    var minute = date.getMinutes(); //分
    var second = date.getSeconds(); //秒
    var day = date.getDay(); //获取当前星期几 
    var ampm = hours < 12 ? 'am' : 'pm';
    $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
    $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + ampm + '</span><span>周' + day + '</span>')

}, 1000)


// 饭堂打卡人数
function people()
{
    var oBody = document.getElementById('people');
	var i = 1000000;
	// setInterval(updateNum, 1000);
    setInterval(updateNum, Math.floor(Math.random()*10001));
	updateNum();
	function updateNum()
	{
		oBody.innerHTML = ++i	
	}
}
people();

$('.select').on('blur', function () {
        $(this).find('.select-ul').hide();
    })
    //下拉框点击出现下拉框内容
$('.select-div').on('click', function () {
    if ($(this).siblings('.select-ul').is(":hidden")) {
        $(this).siblings('.select-ul').show();
    } else {
        $(this).siblings('.select-ul').hide();
    }
})


$('.select-ul').on('click', 'li', function () {
    $(this).addClass('active').siblings('li').removeClass('active').parent().hide().siblings('.select-div').html($(this).html());
    var parentDiv = $(this).parent().parent().parent();
})

//鼠标滑动到按钮，按钮内容变成白色
var imgName;
$('.title-box').children('button').hover(function () {
    imgName = $(this).children('img').attr('src').split('.png')[0];
    $(this).children('img').attr('src', imgName + '_on.png');
}, function () {
    $(this).children('img').attr('src', imgName + '.png');

});


var startColor = ['#0e94eb', '#c440ef', '#efb013', '#2fda07', '#d8ef13', '#2e4af8', '#0eebc4', '#f129b1', '#17defc', '#f86363'];
var borderStartColor = ['#0077c5', '#a819d7', '#c99002', '#24bc00', '#b6cb04', '#112ee2', '#00bd9c', '#ce078f', '#00b2cd', '#ec3c3c'];


// 饭堂窗口热度
function chart1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pie'));
    // var myChart1 = echarts.init(document.getElementById('pie1'));    
    window.addEventListener('resize', function () {
        myChart.resize();
        // myChart1.resize();
    });
    var data = [70, 60, 55, 48, 42];
    var titlename = ['一楼自选', '一楼盖浇饭', '二楼滑蛋盖饭', '一楼韩式盖饭', '一楼水果捞'];
    var valdata = [1302, 1206, 1164, 1093, 905];
    var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
    option = {
        //图标位置
        grid: {
            top: '10%',
            left: '35%'
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                formatter: (value, index) => {
                    return [

                        `{lg|${index+1}}  ` + '{title|' + value + '} '
                    ].join('\n')
                },
                rich: {
                    lg: {
                        backgroundColor: '#339911',
                        color: '#fff',
                        borderRadius: 15,
                        // padding: 5,
                        align: 'center',
                        width: 15,
                        height: 15
                    },
                }
            },
        }, {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                },
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },

        }],
        series: [{
            // name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: data,
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 20,
                    color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}%'
                }
            },
        }, {
            // name: '框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: 'none',
                    borderColor: '#00c1de',
                    borderWidth: 3,
                    barBorderRadius: 15,
                }
            }
        }, ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // myChart1.setOption(option);
}
chart1()

// 窗口平均价格
function chart2() {
    var myChart = echarts.init(document.getElementById('open'));
	// var echartdata = [515, 433, 472, 383];
	var rich = {
		yellow: {
			color: "#ffc72b",
			fontSize: 18,
			padding: [2, 4],
			align: 'center'
		},
		total: {
			color: "#ffc72b",
			fontSize: 20,
			align: 'center'
		},
		white: {
			color: "#fff",
			align: 'center',
			fontSize: 16,
			padding: [10, 0]
		},
		blue: {
			color: '#49dff0',
			fontSize: 16,
			align: 'center'
		},
		hr: {
			borderColor: 'auto',
			width: '100%',
			borderWidth: 1,
			height: 0,
		}
	};
	
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: "{b}: {c} ({d}%)"
		},
		series: [{
			type: 'pie',
			label: {
				fontSize: 24,
				normal: {
					color: "#fff",
					//formatter: '{b|{b}\n     {d}%}',
					// formatter: function(params, ticket, callback) {
					// 	var total = 0; //总数量
					// 	var percent = 0; //占比
					// 	echartdata.forEach(function(value, index) {
					// 		total += value;
					// 	});
					// 	percent = ((params.value / total) * 100).toFixed(1);
					// 	return '{white|' + params.name + '}\n\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
					// },
					padding: [0, -10],
					rich: rich
				}
			},
			labelLine: {
				lineStyle: {
					width: 2
				},
				length: 20,
				length2: 30
			},
			radius: ['40%', '60%'],
			data: [{
				value: 10,
				itemStyle: {
					color: "#bba34c"
					// color:"#e2c0c5"
				},
				name: '一楼自选菜'
			}, {
				value: 8,
				itemStyle: {
					color: "#bf8e89",
					// color:"#c77984"
				},
				name: '一楼粉面饺子'
			}, {
				value: 15,
				itemStyle: {
					color: "#f2b476",
					// color:"#ca5666"
				},
				name: '一楼盖浇饭'
			}, {
				value: 10,
				itemStyle: {
					color: "#76839f",
					// color:"#8c3743"
				},
				name: '一楼汤饭'
			},{
				value: 15,
				itemStyle: {
					color: "#6d6a75",
					// color:"#ebc6fe"
				},
				name: '一楼水果捞'
			},
            {
				value: 15,
				itemStyle: {
					color: "#f4717d",
					// color:"#c18cd8"
				},
				name: '一楼麻辣烫'
			},{
				value: 15,
				itemStyle: {
					color: "#789c8a",
					// color:"#8850a1"
				},
				name: '二楼韩式盖饭'
			},{
				value: 15,
				itemStyle: {
					color: "#5d8aa6",
					// color:"#6c3389"
				},
				name: '二楼炸串小吃'
			},{
				value: 15,
				itemStyle: {
					color: "#c09da7",
				},
				name: '二楼滑蛋盖饭'
			},
            {
				value: 15,
				itemStyle: {
					color: "#965454",
				},
				name: '二楼糖水甜品'
			},{
				value: 15,
				itemStyle: {
					color: "#937bb7",
				},
				name: '二楼自选菜'
			},
        ]
		}, ]
	};
	myChart.setOption(option);
}
chart2()



// function chart2() {
// 	var echartdata = [515, 200, 100, 150];
// 	var rich = {
// 		yellow: {
// 			color: "#ffc72b",
// 			fontSize: 16,
// 			// padding: [2, 4],
// 			align: 'center'
// 		},
// 		total: {
// 			color: "#ffc72b",
// 			fontSize: 16,
// 			align: 'center'
// 		},
// 		white: {
// 			color: "#fff",
// 			align: 'center',
// 			fontSize: 16,
// 			// padding: [10, 0],

// 		},
// 		blue: {
// 			color: '#49dff0',
// 			fontSize: 16,
// 			align: 'center'
// 		},
// 		hr: {
// 			borderColor: 'auto',
// 			width: '100%',
// 			borderWidth: 1,
// 			height: 0,
// 		}
// 	};
// 	var myChart = echarts.init($("#open")[0]);

// 	var option = {
// 		tooltip: {
// 			trigger: 'item',
// 			formatter: "{b}: {c} ({d}%)"
// 		},
// 		grid: {
// 			// top: "0%",
// 			// left: '1%', //折线框左边距
// 			// right: '1%', //折线框右边距
// 			// bottom: '0%', //折线框下边距
// 			containLabel: true
// 		},
// 		series: [{
// 			type: 'pie',
// 			label: {
// 				fontSize: 10,
// 				normal: {
// 					color: "#fff",
// 					//formatter: '{b|{b}\n     {d}%}',
// 					formatter: function(params, ticket, callback) {
// 						var total = 0; //总数量
// 						var percent = 0; //占比
// 						echartdata.forEach(function(value, index) {
// 							total += value;
// 						});
// 						percent = ((params.value / total) * 100).toFixed(1);
// 						return '{white|' + params.name + '}\n\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
// 					},
// 					// padding: [0, -10],
// 					rich: rich,
//                     avoidLabelOverlap:true
// 				}
// 			},
// 			labelLine: {
// 				lineStyle: {
// 					//color: auto
// 					width: 2
// 				},
// 				length: 10,
// 				length2: 30
// 			},
// 			radius: ['40%', '60%'],
// 			data: [{
// 				value: echartdata[0],
// 				itemStyle: {
// 					color: "#E6C146"
// 				},
// 				name: '一楼自选'
// 			}, {
// 				value: echartdata[1],
// 				itemStyle: {
// 					color: "#46F0FF"
// 				},
// 				name: '一楼盖浇饭'
// 			}, {
// 				value: echartdata[2],
// 				itemStyle: {
// 					color: "#D591FE",
// 				},
// 				name: '一楼汤饭'
// 			}, {
// 				value: echartdata[2],
// 				itemStyle: {
// 					color: "#7689FF",
// 				},
// 				name: '一楼水果捞'
// 			}]
// 		}, ]
// 	};
// 	myChart.setOption(option);
// 	setInterval(function() {
// 		echartdata[0] = Math.floor(Math.random() * 1000);
// 		echartdata[1] = Math.floor(Math.random() * 1000);
// 		echartdata[2] = Math.floor(Math.random() * 1000);
// 		option.series[0].data[0].value = echartdata[0];
// 		option.series[0].data[1].value = echartdata[1];
// 		option.series[0].data[2].value = echartdata[2];
// 		myChart.setOption(option);
// 	}, 5000)
// }
// chart2();


// 学生基本消费
function chart3() {
    var myChart = echarts.init(document.getElementById('chart3'));
    var option;
    option = {
        color:['#1089e7','#f6e2a8'],
        legend: {
            data: ['今日人数','昨日人数']
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['5元以下','5-10元','10-15元','15-20元','20-25元','25元以上'],
            axisLabel:{
                color:'white'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                color:'white'
            }
        },
        series: [{
            name: '今日数量',
            data: [100,250, 135, 147, 260,50],
            type: 'line',
            smooth:true
        },
        {
            name:'昨日数量',
            data: [150,125, 225, 47, 160,150],
            type: 'line',
            smooth:true
        }
        ],
        grid:{
            top:'15%',
            left:'13%',
            // bottom:'20%',
            right:'10%',
            containLaber:true
        }
    };
    myChart.setOption(option);
}
chart3()

//菜单
function chart4(){
	var lis=document.getElementsByTagName('li');
    var dbox=document.getElementsByClassName('data-box');
	for(let n=0;n<lis.length;n++){
        (function(i){
            lis[i].onclick=function(){
                for(let m=0;m<lis.length;m++){
                    // dbox[m].className="";
                    // lis[m].className="";
                    dbox[m].style.display="none";
                    dbox[i].style.display="block";
                }
                this.className="active";
            }
        }(n))
    }
}
chart4()


// 饭堂留言墙
var RZstatus = [
    "今日份的韩式盖饭好好吃", 
    "炸酱面少加酱油多加醋yyds", 
    "上完体育课只想吃水果捞", 
    "饭堂大叔超级好人", 
    "坐等酸菜鱼开张的一天", 
    "在线希望阿姨不要手抖呜呜呜", 
    "自选什么时候能有新菜品呀", 
    "希望能多准备点芋圆", 
    "饭堂要是能放歌就好了", 
    "干饭人干饭魂干饭都是人上人", 
    "希望汤可以多下点盐", 
    "自选的青菜什么时候能多点品种"];
function menu() {
	for (var i = 0; i < RZstatus.length; i++) {
		$(".menuList .moveul").html((index, html) => {
			return html += `<li><i></i><span>${RZstatus[i]}</span></li>`
		})
	}
	var siz1 = $(".menuList .moveul").find("li").length;
	$(".menuList .moveul").css('height', $(".menuList .moveul").find("li")[0].offsetHeight * 35);
	$(".menuList .moveul").html(function(index, value) {
		return value + value;
	})
	setInterval(function() {
		$(".menuList .moveul").animate({
			top: "-=35"
		}, 'slow', function() {
			if ($(".menuList .moveul")[0].offsetTop <= -siz1 * 35) {
				$(".menuList .moveul").css('top', 0);
			}
		})
	}, 5300 )
}
menu();

